<script setup lang="ts">
import rocketImg from '@/assets/images/international/design/rocket.png';
import customerImg from '@/assets/images/international/design/customer-service.png';
import locationImg from '@/assets/images/international/design/location.png';

interface LocalizeDataType {
  imgUrl: string;
  title: string;
  comment: string;
}

const localizeBoxs: LocalizeDataType[] = [
  {
    imgUrl: rocketImg,
    title: '本土团队',
    comment: '熟知当地行规及政策可快速响应',
  },
  {
    imgUrl: customerImg,
    title: '双语服务',
    comment: '团队已磨合多年，服务流程熟练提供双语服务和技术响应',
  },
  {
    imgUrl: locationImg,
    title: '业务覆盖广',
    comment: '业务覆盖全球66+个核心地区性价比高',
  },
];
</script>

<template>
  <div class="international-localize">
    <div class="container">
      <div class="localizeBody">
        <div class="title">
          <span class="left">国际</span>
          <span class="right">本地化服务</span>
        </div>
        <div class="comment">
          云桥通在亚洲、欧洲、北美洲等全球各核心城市范围内建立了广泛的网络覆盖，拥有多个数据中心和网络出口节点。更容易地为客户提供全球性的互联网接入服务，满足不同地区和国家的需求
        </div>
        <div class="content">
          <div class="box" v-for="item in localizeBoxs" :key="item.imgUrl">
            <img v-lazy="item.imgUrl" alt="" />
            <span class="box_title">{{ item.title }}</span>
            <p class="box_comment">{{ item.comment }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.international-localize {
  background-color: #deebdf;
  .localizeBody {
    width: 100%;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      margin-bottom: 50px;
      text-align: center;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 4px;
      font-family: 'SourceHanSansCN-Normal';
      .right {
        color: #484848;
      }
      .left {
        font-weight: 700;
        /* 定义渐变色背景 */
        background: linear-gradient(to right, #5b9bc7, #3e5898);
        /* 设置背景剪切区域为文本 */
        -webkit-background-clip: text;
        /* 设置文本填充颜色为透明，只显示渐变色背景 */
        -webkit-text-fill-color: transparent;
      }
    }
    .comment {
      align-self: center;
      margin-bottom: 60px;
      width: 1012px;
      font-family: 'SourceHanSansCN-Light';
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 47px;
      letter-spacing: 1px;
      color: #1e1f1f;
      text-align: center;
    }
    .content {
      display: flex;
      justify-content: space-between;

      .box {
        width: 385px;
        height: 280px;
        background-color: #fafbfc;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 50px;
        img {
          margin-top: 25px;
          width: 100px;
          height: 100px;
        }
        .box_title {
          margin-top: 20px;
          font-family: 'SourceHanSansCN-Bold';
          font-size: 28px;
          font-weight: 700;
          line-height: 46px;
          letter-spacing: 1px;
          color: #4a8cb7;
        }
        .box_comment {
          font-family: 'SourceHanSansCN-Light';
          font-size: 20px;
          line-height: 31px;
          color: #050505;
          text-align: center;
        }
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 93%;
    .localizeBody {
      .content {
        justify-content: space-evenly;
        .box {
          margin: 0 5px;
        }
      }
    }
  }
}

// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .localizeBody {
      .comment {
        width: 100%;
      }
      .content {
        justify-content: space-evenly;
        .box {
          margin: 0 5px;
        }
      }
    }
  }
}

// md(768px)至lg(992px)
// sm(576px)至md(768px)
@media screen and (max-width: 992px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .localizeBody {
      .comment {
        width: 100%;
      }
      .content {
        width: 100%;
        align-items: center;
        flex-direction: column;
        .box {
          margin: 10px 0;
        }
      }
    }
  }
}
</style>
